"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { CalendarIcon, PlusIcon, RefreshCwIcon, PlayIcon, PauseIcon, EditIcon, TrashIcon } from "lucide-react"
import DashboardLayout from "@/components/dashboard-layout"

// 模拟数据
const mockSchedules = [
  {
    id: 1,
    name: "每日灌溉计划",
    type: "daily",
    time: "06:00",
    duration: 30,
    status: "active",
    nextRun: "2024-05-15 06:00",
    location: "1号农田",
  },
  {
    id: 2,
    name: "周末施肥计划",
    type: "weekly",
    time: "09:00",
    duration: 45,
    status: "scheduled",
    nextRun: "2024-05-18 09:00",
    location: "2号农田",
  },
  {
    id: 3,
    name: "应急灌溉计划",
    type: "manual",
    time: "--:--",
    duration: 20,
    status: "inactive",
    nextRun: "未排程",
    location: "1号农田",
  },
]

export default function SchedulePage() {
  const [schedules, setSchedules] = useState(mockSchedules)

  const toggleSchedule = (id: number) => {
    setSchedules(schedules.map(schedule => 
      schedule.id === id 
        ? { ...schedule, status: schedule.status === "active" ? "inactive" : "active" }
        : schedule
    ))
  }

  return (
    <DashboardLayout>
      <div className="p-6 space-y-6">
        <div className="flex justify-between items-center">
          <h1 className="text-2xl font-bold">灌溉计划</h1>
          <div className="flex gap-2">
            <Button variant="outline" size="sm">
              <RefreshCwIcon className="h-4 w-4 mr-2" />
              刷新
            </Button>
            <Button size="sm">
              <PlusIcon className="h-4 w-4 mr-2" />
              新建计划
            </Button>
          </div>
        </div>

        <Card>
          <CardHeader>
            <CardTitle>计划列表</CardTitle>
            <CardDescription>管理所有灌溉和施肥计划</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>计划名称</TableHead>
                    <TableHead>类型</TableHead>
                    <TableHead>执行时间</TableHead>
                    <TableHead>时长(分钟)</TableHead>
                    <TableHead>位置</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead>下次执行</TableHead>
                    <TableHead className="text-right">操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {schedules.map((schedule) => (
                    <TableRow key={schedule.id}>
                      <TableCell className="font-medium">{schedule.name}</TableCell>
                      <TableCell>
                        {schedule.type === "daily" && "每日"}
                        {schedule.type === "weekly" && "每周"}
                        {schedule.type === "manual" && "手动"}
                      </TableCell>
                      <TableCell>{schedule.time}</TableCell>
                      <TableCell>{schedule.duration}</TableCell>
                      <TableCell>{schedule.location}</TableCell>
                      <TableCell>
                        <Badge
                          variant={
                            schedule.status === "active"
                              ? "default"
                              : schedule.status === "scheduled"
                                ? "outline"
                                : "secondary"
                          }
                        >
                          {schedule.status === "active" && "运行中"}
                          {schedule.status === "scheduled" && "已排程"}
                          {schedule.status === "inactive" && "已停止"}
                        </Badge>
                      </TableCell>
                      <TableCell>{schedule.nextRun}</TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Button
                            variant={schedule.status === "active" ? "destructive" : "default"}
                            size="sm"
                            onClick={() => toggleSchedule(schedule.id)}
                          >
                            {schedule.status === "active" ? (
                              <>
                                <PauseIcon className="h-4 w-4 mr-1" /> 停止
                              </>
                            ) : (
                              <>
                                <PlayIcon className="h-4 w-4 mr-1" /> 启动
                              </>
                            )}
                          </Button>
                          <Button variant="outline" size="sm">
                            <EditIcon className="h-4 w-4" />
                            <span className="sr-only">编辑</span>
                          </Button>
                          <Button variant="outline" size="sm">
                            <TrashIcon className="h-4 w-4" />
                            <span className="sr-only">删除</span>
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </CardContent>
        </Card>
      </div>
    </DashboardLayout>
  )
} 